<template>
	<view>
		<view class="search">
			<u-search v-model="keyword" shape="shape" disabled placeholder="vue3.0实战"></u-search>
		</view>
		<view class="swiper_image">
			<u-swiper :list="swiperlist" @change="e => currentNum = e.current" :autoplay="true"
				indicatorStyle="right: 20px" circular :loading="loading">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperlist.length }}</text>
				</view>
			</u-swiper>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentNum: 0,
				swiperlist: [],
				loading: true,
				keyword: "vue3.0实战",
				ratelsit:[], //好评
				salelist:[], //销量
				favlist:[], //购买意向
			}
		},
		onLoad() {
			//调用封装请求函数获取轮播图
			this.getBanner();
			//调用封装请求函数获取首页书本
			this.getBooks();
			//搜索开始轮播
			this.searchContent();
		},


		//上拉刷新
		onPullDownRefresh() {
			// console.log('刷新了')
			// this.flag = false
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},

		methods: {
			// 封装promise请求函数
			getApi(url) {
				return new Promise((resolve, reject) => {
					return uni.request({
						url: url,
						method: 'get',
						success(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},

			//搜索轮播
			searchContent() {
				let keywords = [
					"Liunx零基础", "菜鸟教程", "mysql数据库"
				]
				let num = 0;
				setInterval(() => {
					if (num < keywords.length) {
						num++;
					} else {
						num = 0;
					}
					this.keyword = keywords[num];
				}, 2000);
			},


			//请求轮播图
			getBanner() {
				this.getApi("/api/public/findHot/5/1").then((res) => {
					let swiperImage = res.data.data;
					swiperImage.forEach(item => {
						let imageUrl = `/api/public/showImg/${item.picture}`;
						this.swiperlist.push(imageUrl);
					});
					this.loading = false;
				}).catch((err) => {
					console.log(err)
				})
			},
			//请求首页书本
			getBooks() {
				// 好评度
				this.getApi("/api/public/book/findRate5").then((res) => {
					this.ratelsit = res.data.data
				}).catch((err) => {
					console.log(err)
				})
				//销量
				this.getApi("/api/public/book/findSale5").then((res) => {
					this.salelist = res.data.data
				}).catch((err) => {
					console.log(err)
				})
				//购买意向
				this.getApi("/api/public/book/findFav5").then((res) => {
					this.favlist = res.data.data
				}).catch((err) => {
					console.log(err)
				})
			}

		}
	}
</script>


<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.search {
		margin: 10px auto;
		width: 96%;
	}

	.swiper_image {
		margin: 0 auto;
		width: 96%;
	}
</style>
